<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style"> 
    <meta content="telephone=no" name="format-detection">
	
	<title>Demo</title>
	<style>
		body, html {
			padding: 0px;
			margin:0px;
			background-color: gray;
			height: 100%;
		}
		.container {
			width: 100%;
			height: 500px;
			background-color: #fff;   
			text-align: center;
			padding: 10px;
			box-sizing: border-box;
		}

		.spinner {
		  	margin: 100px auto;
		  	width: 20px;
		  	height: 20px;
		  	position: relative;
		}
		 
		.container1 > div, .container2 > div, .container3 > div {
		  width: 6px;
		  height: 6px;
		  background-color: #333;
		 
		  border-radius: 100%;
		  position: absolute;
		  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
		  animation: bouncedelay 1.2s infinite ease-in-out;
		  -webkit-animation-fill-mode: both;
		  animation-fill-mode: both;
		}
		 
		.spinner .spinner-container {
		  position: absolute;
		  width: 100%;
		  height: 100%;
		}
		 
		.container2 {
		  -webkit-transform: rotateZ(45deg);
		  transform: rotateZ(45deg);
		}
		 
		.container3 {
		  -webkit-transform: rotateZ(90deg);
		  transform: rotateZ(90deg);
		}
		 
		.circle1 { top: 0; left: 0; }
		.circle2 { top: 0; right: 0; }
		.circle3 { right: 0; bottom: 0; }
		.circle4 { left: 0; bottom: 0; }
		 
		.container2 .circle1 {
		  -webkit-animation-delay: -1.1s;
		  animation-delay: -1.1s;
		}
		 
		.container3 .circle1 {
		  -webkit-animation-delay: -1.0s;
		  animation-delay: -1.0s;
		}
		 
		.container1 .circle2 {
		  -webkit-animation-delay: -0.9s;
		  animation-delay: -0.9s;
		}
		 
		.container2 .circle2 {
		  -webkit-animation-delay: -0.8s;
		  animation-delay: -0.8s;
		}
		 
		.container3 .circle2 {
		  -webkit-animation-delay: -0.7s;
		  animation-delay: -0.7s;
		}
		 
		.container1 .circle3 {
		  -webkit-animation-delay: -0.6s;
		  animation-delay: -0.6s;
		}
		 
		.container2 .circle3 {
		  -webkit-animation-delay: -0.5s;
		  animation-delay: -0.5s;
		}
		 
		.container3 .circle3 {
		  -webkit-animation-delay: -0.4s;
		  animation-delay: -0.4s;
		}
		 
		.container1 .circle4 {
		  -webkit-animation-delay: -0.3s;
		  animation-delay: -0.3s;
		}
		 
		.container2 .circle4 {
		  -webkit-animation-delay: -0.2s;
		  animation-delay: -0.2s;
		}
		 
		.container3 .circle4 {
		  -webkit-animation-delay: -0.1s;
		  animation-delay: -0.1s;
		}
		 
		@-webkit-keyframes bouncedelay {
		  0%, 80%, 100% { -webkit-transform: scale(0.0) }
		  40% { -webkit-transform: scale(1.0) }
		}
		 
		@keyframes bouncedelay {
		  0%, 80%, 100% {
		    transform: scale(0.0);
		    -webkit-transform: scale(0.0);
		  } 40% {
		    transform: scale(1.0);
		    -webkit-transform: scale(1.0);
		  }
		}
	</style>
</head>
<body>
	<div class="container">
		<h3>下拉刷新</h3>
	</div>
	<script src="crefresh.js"></script>
	<script>
		let container = new Crefresh({
			selector : '.container',
			loadingHtml : ` 
				<div class="spinner">
				  <div class="spinner-container container1">
				    <div class="circle1"></div>
				    <div class="circle2"></div>
				    <div class="circle3"></div>
				    <div class="circle4"></div>
				  </div>
				  <div class="spinner-container container2">
				    <div class="circle1"></div>
				    <div class="circle2"></div>
				    <div class="circle3"></div>
				    <div class="circle4"></div>
				  </div>
				  <div class="spinner-container container3">
				    <div class="circle1"></div>
				    <div class="circle2"></div>
				    <div class="circle3"></div>
				    <div class="circle4"></div>
				  </div>
				</div> 
			`,
			done : function () {
				let oldHtml = document.querySelector(".container").innerHTML ;
				document.querySelector(".container").innerHTML = oldHtml + "<h3>下拉刷新</h3>";
			}
		});

		document.body.addEventListener('touchmove', function (event) {
		     event.preventDefault();
		}, false); 
	</script>
</body>
</html>